<template>
    <!-- 房间列表 -->
    <div class="room-list-wrapper">
        <!-- 基于rooms数组循环渲染room-card组件 -->
        <room-card v-for="(item,index) in rooms" :key="index" :room="item"></room-card>
        <app-dialog :show="DialogBox.show" :type="DialogBox.type">{{DialogBox.msg}}</app-dialog>
    </div>
</template>

<script>
    /**
     * 页面操作流程：
     *  发送请求获取当前房型对应的所有房间号
     *  将房间号传入子组件room-card进行渲染
     */

    import {
        reactive
    } from 'vue'
    import {
        getAllRooms
    } from '../../services/index'
    import {
        DialogBox
    } from '../../utils/index'
    import RoomCard from './RoomCard'

    export default {
        name: 'RoomList',
        components: {
            RoomCard
        },
        setup() {
            // 定义响应式的rooms数组，用于存放所有房型的数据
            let rooms = reactive(new Array())
            // getALLRooms函数发送请求，获取所有房型的数据
            getAllRooms().then((response) => {
                if (response.data.code == 200) {
                    rooms.push(...response.data.object)
                } else {
                    DialogBox.showDialog('服务器繁忙，请稍后重试')
                }
            })
            return {
                rooms,
                DialogBox
            }
        }
    }
</script>

<style lang="scss" scoped>
    .room-list-wrapper {
        width: 100%;
        background-color: #F3F3F4;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
</style>